LINE-HEIGHT那些坑

line-height 用来设置行间的距离（行高），最为人熟悉的是可以用在垂直居中上，非常简单。但是使用时有很多坑，需要注意。p.s通常这些坑会出现在面试题目中:)

基本属性

• normal：默认，设置合理的行间距，浏览器默认值1.0-1.2。
• number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。缩放因子，直接继承，而不是继承计算值。
• length：设置固定具体的行间距。
• %：基于当前字体尺寸的百分比行间距。继承的是计算值，而非属性值。
• inherit：规定应该从父元素继承 line-height.属性的值。（IE不支持）。

注意点

以em、ex和百分比%为单位的行高，其基数是元素本身的字体尺寸。继承的都是计算值，而非属性值。

<div style=“font-size:14px;line-height:150%;”>
  123
  <p style=“font-size:40px”>456</p>
</div>

字符“456”的行高会与“123”一致为21px,会导致重叠。

为避免上述情况则可以设置采用固定数字（缩放因子）来避免，缩放因子直接继承。

<div style=“font-size:14px;line-height:1.5;”>
  123
  <p style=“font-size:40px”>456</p>
</div>

字符“456”的行高为60px,“123”的行高为21px。

在垂直居中中的运用

1. 单行文字垂直居中

Line-height值与height高度设为一致即可。适用于列表项，图片按钮项。

2. 多行文字垂直居中

需要注意将vertical-align设为middle才会垂直居中，仅对内联元素有效，块级元素无效。

```    
<div style="height:100px;line-height:100px;font-size:0;">
   <span style="display:inline-block;font-size:10px;line-height:1.5;vertical-align:middle;">123.<br/>
     123
    </span>
</div>
```

3. 图文混排时垂直居中

IE6-7使用该方法时，图片无法居中。需要hack，方法如下：

```
<div style=”width: 150px;height: 155px;line-height: 155px;border: 1px solid #000;background: #f00;text-align: center;
”>
    <img src="hl_logo.png" alt="" width="95" height="115" style=”vertical-align: middle;”>
    <span style=”display: inline-block;”></span>
</div>
```

添加额外的span，将display属性设置为inline-block使其拥有“layout”，可以修复该bug。

最后的最后

为了避免各种继承，最好将line-height属性设置成number数字；
图文混排、多行文字的居中最好采用padding模式解决，具体下次另表。

参考文档：
CSS行高line-height的一些深入理解及应用

CSS line-height 属性